<template>
  <el-container>
    <el-card style="width: 85%" :body-style="{width: '1130px'}">
      <!-- 作品展示 -->
      <div v-if="this.type === 'img'" class="img-show">
        <img :src=" GLOBAL_BASE_URL + '/' + appealInfo.workAddress" class="image">
        <!-- <img :src="'http:\\\\localhost:8080\\' +  appealInfo.workAddress" class="image"> -->
      </div>
      <div v-if="this.type === 'txt'" class="txt-show">
        <iframe :src=" GLOBAL_BASE_URL + '/' + appealInfo.workAddress" class="txt"/>
        <!-- <iframe :src="'http:\\\\localhost:8080\\' +  appealInfo.workAddress" class="txt"/> -->
      </div>
      <div class="info-show">
        <p class="title">{{appealInfo.workName}}</p>
        <div class="author-show">
          <!-- 用户头像地址要获取 -->
          <img class="avatar" src="../assets/img_wrap.jpg" alt="">
          <span class="name">{{ appealInfo.authorName }}</span>
          <br>
          <span class="time">{{ appealInfo.appealTime }} 提出申诉</span>
        </div>
        <div class="status-show">
          <span class="title">作品状态:</span>
          <el-tag type="warning" size="small">{{appealInfo.workStatus}}</el-tag>
        </div>
        <div class="desc-show">
          <span class="title">申诉理由:</span>
          <span class="desc">
            {{ appealInfo.appealReason }}
          </span>
        </div>
      </div>
      <!-- 管理员操作部分 -->
      <div class="check">
        <el-button type="primary" style="width:120px" :disabled="this.btnDisabled" @click="appealPassed()">申诉通过</el-button>
        <el-button type="danger" style="width:120px" :disabled="this.btnDisabled" @click="feedbackDialogVisible = true">申诉驳回</el-button>
      </div>
      <el-dialog title="申诉反馈" :visible.sync="feedbackDialogVisible">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="驳回理由">
            <el-checkbox-group v-model="form.reason">
              <el-checkbox label="包含违法信息" name="reason"></el-checkbox>
              <el-checkbox label="包含诈骗信息" name="reason"></el-checkbox>
              <el-checkbox label="其他理由" name="reason"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="修改建议">
            <el-input type="textarea" v-model="form.advice"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="appealUnpassed()">确认</el-button>
            <el-button @click="feedbackDialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      GLOBAL_BASE_URL: this.GLOBAL.BASE_URL,
      userId: '',
      fileId: '',
      feedbackDialogVisible: false,
      appealInfo: {
        workName: '作品名称',
        authorName: '作者',
        userType: '普通用户',
        appeaTime: '2020-3-17',
        workType: '图片',
        appealReason: '这里是作者填写的申诉理由……',
        workStatus: '',
        workAddress: ''
      },
      form: {
        reason: [],
        advice: ''
      },
      type: '',
      check: false,
      btnDisabled: false
    }
  },
  mounted () {
    this.userId = this.$route.params.id
    this.type = this.$route.params.type
    this.fileId = this.$route.params.fileId
    this.getAppeal()
    // this.setDetailType()
  },
  methods: {
    // setDetailType () {
    //   if (this.appealInfo.workType === '图像') {
    //     this.type = 'img'
    //   }
    //   if (this.appealInfo.workType === '文档') {
    //     this.type = 'txt'
    //   }
    // },
    getAppeal () {
      this.$axios({
        methods: 'POST',
        url: '/admin/getAppeal',
        params: {
          fileId: this.fileId
        }
      }).then(res => {
        console.log(res)
        this.appealInfo = res.data.data
        if (this.appealInfo.appealStatus === '已处理') {
          this.btnDisabled = true
        }
      }).catch(err => {
        if (err.response) {
          console.log(err.response.status)
          if (err.response.status === 404) {
            alert('客户端请求出现问题')
          }
        } else if (err.request) { // 请求已经发起但没有响应，需要配合后端实现的错误处理
          console.error(err.request)
        } else { // 请求没有发起，也没有响应，需要配合后端实现的错误处理
          console.error(err.message)
        }
      })
    },
    changeAppealStatus () {
      this.$axios({
        methods: 'POST',
        url: '/admin/changeAppealStatus',
        params: {
          fileId: this.fileId,
          // formReason: this.form.reason,
          formReason: this.$qs.stringify(this.form.reason),
          formAdvice: this.form.advice
        }
      }).then((res) => {
        console.log(res)
        this.check = res.data.data[0]
        // this.check = res.data.data.code
        if (this.check === true) {
          console.log('申诉状态更改成功')
          this.appealInfo = res.data.data[1]
          console.log(this.appealInfo)
          // this.workInfo = res.data.data.data
          this.$message({
            type: 'success',
            message: res.data.msg
          })
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(function (error) { console.log(error) })
    },
    appealPassed () {
      this.btnDisabled = true
      // 向后端更新作品状态
      this.changeAppealStatus()
    },
    appealUnpassed () {
      this.feedbackDialogVisible = false
      // 向后端更新作品状态
      if (this.form.reason.length) {
        this.changeAppealStatus()
        this.btnDisabled = true
      } else {
        this.$message.error('至少选择一个理由')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;
  display: flex;
  justify-content: center;
}

.el-card {
  display: flex;
}

.el-card span {
  font-size: 17px;
}

.el-card .img-show {
  width: 60%;
  // width:650px;
  height: 400px;
  float: left;
  margin-right: 30px;
}

.el-card .img-show img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.el-card .txt-show{
  width:60%;
  height: 400px;
  float: left;
  margin-right: 30px;
}

.el-card .txt-show iframe {
  width: 100%;
  height: 100%;
  // width: auto;
  // height: auto;
  // max-width: 100%;
  // max-height: 100%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.el-card .info-show{
  float: right;
  width: 35%;
}
.el-card .info-show p {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight:bold
}
.el-card .info-show .author-show {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.el-card .info-show .author-show img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 10px;
}

.el-card .info-show .author-show .name {
  margin-right: 10px;
  font-size: 16px;
}

.el-card .info-show .author-show .time {
  font-size: 14px;
  color: #666;
}

.el-card .el-button{
  margin-bottom: 20px;
}

.el-card .info-show .status-show {
  display: flex;
  height: 35px;
  // align-items: center;
  margin-bottom: 5px;
  .el-tag {
    font-size: 14px;
    margin-left: 10px;
  }
}

.el-card .info-show .desc-show span:last-child {
  font-size: 16px;
  display: flex;
}

.el-card .info-show span:first-child {
  margin-right: 10px;
  font-size: 16px;
  display: flex;
}

.el-card .check {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%);
}
</style>
